<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            height: 500px;
            width: 100%;
            border-radius: 1em;
            overflow: hidden;
            box-shadow: 0 10px 20px #dbdbdb;
            font-family: sans-serif;
        
        }

        .palette {
            display: flex;
            height: 86%;
            width: 100%;
        }

        .color {
            height: 100%;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            letter-spacing: 1px;
            transition: flex 0.1s linear;
        }

        .color span {
            opacity: 0;
            transition: opacity 0.1s linear;
        }

        .color:nth-child(1) {
            background: #264653;
        }

        .color:nth-child(2) {
            background: #2a9d8f;
        }

        .color:nth-child(3) {
            background: #e9c46a;
        }

        .color:nth-child(4) {
            background: #f4a261;
        }

        .color:nth-child(5) {
            background: #e76f51;
        }

        .color:hover {
            flex: 2;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }

        .color:hover span {
            opacity: 1;
        }

        #stats {
            height: 14%;
            width: 100%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5em;
            box-sizing: border-box;
            color: #bebebe;
        }

        #stats svg {
            fill: #bebebe;
            transform: scale(1.2);
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="palette">
            <div class="color"><span><a href="./9.25/9月25号作业.html">9月25号作业</a></span></div>
            <div class="color"><span><a href="./9.26/9月26号作业.html">9月26号作业</a></span></div>
            <div class="color"><span><a href="./9.27/9月27号作业.html">9月27号作业</a></span></div>
            <div class="color"><span><a href="./10.08/10月8号作业.html">10月8号作业</a></span></div>
            <div class="color"><span><a href="./10.10/10月10号作业.html">10月9号作业</a></span></div>
            
        </div>
        <div id="stats">
            <span style="color: black;"> 9 月份作业</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path
                    d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z">
                </path>
            </svg>
        </div>
    </div>

    <div class="container">
        <div class="palette">
            <div class="color"><span><a href="./10.12/测试10月12.html">10月12号作业</a></span></div>
            <div class="color"><span><a href="./10.13/10.13作业.html">10月13号作业</a></span></div>
            <div class="color"><span><a href="./10.16/10.16作业.html">10月16号作业</a></a></span></div>
            <div class="color"><span><a href="./10.16/10.16作业2.html">10月16号作业</a></span></div>
            <div class="color"><span><a href="./10.17/10.17作业.html">10月17号作业</a></span></div>
        </div>
        <div id="stats">
            <span style="color: black;">10 月份作业</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path
                    d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z">
                </path>
            </svg>
        </div>
    </div>

    <div class="container">
        <div class="palette">
            <div class="color"><span><a href="./10.18/作业.html">10月18号作业</a></span></div>
            <div class="color"><span><a href="./10.19/index.js">10月19号作业</a></span></div>
            <div class="color"><span><a href="./10.21/index.js">10月21号作业</a></span></div>
            <div class="color"><span><a href="./10.23/作业.html">10月23号作业</a></span></div>
            <div class="color"><span><a href="./10.25/index.js">10月25号作业</a></span></div>
        </div>
        <div id="stats">
            <span style="color: black;">10 月份作业 saves</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path
                    d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z">
                </path>
            </svg>
        </div>
    </div>

 

    <div class="container">
        <div class="palette">
            <div class="color"><span><a href="./10.26/index.js">10月26号作业</a></span></div>
            <div class="color"><span><a href="./10.30/10.30作业.html">10月30号作业</a></span></div>
            <div class="color"><span><a href="./构造函数/红绿灯2/">11月19号作业</a></span></div>
            <div class="color"><span><a href="./经典轮播图/">11月20号作业</a></span></div>
           
        </div>
        <div id="stats">
            <span style="color: black;">11 月份作业 saves</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path
                    d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z">
                </path>
            </svg>
        </div>
    </div>

   

</body>

</html>